<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // defineProperty 1.创建一个可控的对象  2.修改一个对象 为可控制对象
        // Object.defineProperty()

        // 一、创建一个可控对象 
        // var obj = {键名：键值}
        // var val = "张三";
        // var obj = Object.defineProperty({},"name",{
        //     get:function(){
        //         console.log("get...")
        //         return val;
        //     },
        //     set:function(newvalue){
        //         console.log("修改了",newvalue);
        //         if(val !== newvalue)
        //             val = newvalue;
        //     },
        //     configurable:true,
        //     enumerable:true
        // })

        // // console.log(obj);
        // // obj.name;
        // obj.name = "李四";
        // console.log(obj);

        // 二、修改一个对象为可控制对象
        // var obj = {
        //     name:"张三",
        //     age:20
        // }

        // console.log(obj);
        // 修改 obj里的 age属性为 可控制属性
        // Object.defineProperty(obj,"age",{
        //     get:function(){
        //         return 20;
        //     },
        //     set:function(newvalue){
        //         console.log("set",newvalue)
        //     },
        //     configurable:true,
        //     enumerable:true
        // })


        // Object.defineProperty(obj,"name",{
        //     get:function(){
        //         return "张三";
        //     },
        //     set:function(newvalue){
        //         console.log("set",newvalue)
        //     },
        //     configurable:true,
        //     enumerable:true
        // })
        // console.log(obj);

        // Proxy : 代理对象

        // 封住一个 观察数据的函数

        var obj = {
            name: "张三",
            age: 20
        }

        function observe(obj) {
            for (var key in obj) {
                // (function(){
                    let val = obj[key];
                    // val  ---> 张三 ---》get 张三 
                    // val ---->age -->get 20
                    // 得到张三  执行get  得到 20 执行get
                    // 创建作用域 把 val 值 保存起来
                    // 全局  局部（函数作用域）
                    console.log(val);
                    Object.defineProperty(obj, key, {
                        get: function () {
                            console.log("get");
                            return val;
                        },
                        set: function (newvalue) {
                            if (val != newvalue) {
                                val = newvalue;
                            }
                        },
                        configurable: true,
                        enumerable: true
                    })


                  
            }
        }
        observe(obj);
        obj.name;
        obj.age;
        console.log(obj);

      




    </script>
</body>

</html>